import { defineComponent, markRaw } from 'vue'
import ItemNode from '../../ItemNode/ItemNode'
import {
  ElColorPicker,
  ElDivider,
  ElInput,
  ElRadioButton,
  ElRadioGroup,
  ElText
} from 'element-plus'
import classes from '../../ItemNode/ItemNode.module.css'

export default class NDivider extends ItemNode {
  isNDivider = true
  isDataDisplayNode = true

  constructor(node?: NDivider) {
    super(node)

    if (!node) {
      this.path = './components/NDivider/NDivider.tsx'
      this.name = '分割线'

      const style = this.props.style
      this.props.style = {
        ...style,
        width: '100%'
      }

      this.props.direction = 'horizontal'
      this.props.borderColor = '#dcdfe6'
      this.props.borderWidth = '1px'
    }

    const onDirectionChage = () => {
      this.props.style.width = this.props.direction == 'horizontal' ? '100%' : '0px'
      this.props.style.height = this.props.direction == 'horizontal' ? '0px' : '100%'
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props) => {
          return () => (
            <pComponent>
              <ElDivider
                direction={this.props.direction}
                style={{
                  '--el-border-color': this.props.borderColor,
                  borderWidth: this.props.borderWidth,
                  width: this.props.style.width,
                  height: this.props.style.height,
                  margin: '0px'
                }}
              ></ElDivider>
            </pComponent>
          )
        },
        {
          name: 'NDivider'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        return () => (
          <pView>
            <this.component style={{ width: '100px' }}></this.component>
          </pView>
        )
      })
    )

    const pParams = this.params
    this.params = markRaw(
      defineComponent(() => {
        return () => (
          <pParams>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                方向
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.direction} onChange={onDirectionChage}>
                  <ElRadioButton value="horizontal" label="横向" size="small"></ElRadioButton>
                  <ElRadioButton value="vertical" label="纵向" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                线宽
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput v-model={this.props.borderWidth} size="small"></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                边框色
              </ElText>
              <div class={classes['params-item-content']}>
                <ElColorPicker
                  modelValue={this.props.borderColor}
                  onUpdate:modelValue={(v) => (this.props.borderColor = v || '')}
                  show-alpha
                  size="small"
                  teleported={false}
                ></ElColorPicker>
              </div>
            </div>
          </pParams>
        )
      })
    )
  }

  toVue(): SfcObj {
    const sfcObj = super.toVue()

    sfcObj.imports = {
      ...sfcObj.imports,
      ['element-plus']: {
        ElDivider: 'ElDivider'
      }
    }

    sfcObj.template = sfcObj.template.replace(
      '<slot></slot>',
      `
  <ElDivider
    direction="${this.props.direction}"
    style="--el-border-color: ${this.props.borderColor ?? 'unset'}; border-width: ${this.props.borderWidth ?? 'unset'}; width: ${this.props.style.width ?? 'unset'}; height: ${this.props.style.height ?? 'unset'}; margin: 0px;"
  >
  </ElDivider>
      `
    )

    return sfcObj
  }
}
